<!DOCTYPE html>
<html>
<script src="../include.js"></script>
<style>
    #box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;

        transition: left 1s linear;
    }

    #box.move {
        left: 200px;
    }
</style>
<div id="box"></div>
<script>
    asyncTest(async done => {
        let box = document.getElementById("box");
        println(`left starts at: ${getComputedStyle(box).left}`);
        box.classList.add("move");
        setTimeout(() => {
            let left = parseFloat(getComputedStyle(box).left);
            println(`shortly after starting, left is >= 0px? ${left >= 0} and < 200px? ${left < 200}`);
        }, 1);
        setTimeout(() => {
            let left = parseFloat(getComputedStyle(box).left);
            println(`half-way through, left is > 0px? ${left > 0} and < 200px? ${left < 200}`);
        }, 500);
        setTimeout(() => {
            let left = parseFloat(getComputedStyle(box).left);
            println(`near the end, left is > 0px? ${left > 0} and < 200px? ${left < 200}`);
        }, 950);
        setTimeout(() => {
            // FIXME: This is a hack to make it recompute the style, otherwise we get 0px for the left value.
            //        Figure out why!
            box.style.top = "0px";

            println(`after the transition, left is: ${getComputedStyle(box).left}`);
            done();
        }, 1050);
    });
</script>
</html>
